<!DOCTYPE html>
<html lang="en-us">
<head>

<title>公式编辑器</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="../../css/note.css"/>
<style type="text/css">
.control {
  white-space: nowrap;
  overflow: auto;
  display: flex;
}
button {
  padding: 0.3em 1em;
  margin: 5px 0;
  height: 40px;
  background: rgba(255,255,255,0.4);
  border-radius: 0;
}
.control button {
  border-left: none;
  color: #444;
}
.control button:first-child {
  border-left: 1px solid #d0d0d0;
  border-radius: 7px 0 0 7px;
}
.control button:last-child {
  border-radius: 0 7px 7px 0;
}
#keyboard {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
#keyboard.hidden {
  display: none;
}
#keyboard button:first-child {
  border-left: 1px solid #d0d0d0;
}
#keyboard button {
  border-left: none;
  text-align: center;
  padding: 0;
  width: 36px;
  height: 36px;
}
#outputWrapper {
  border: 1px solid #ccc;
  background: white;
  margin: 55px 0 10px 0;
  max-height: 400px;
  overflow: auto;
}
#outputWrapper div {
  padding: 10px 0;
  text-align: center;
}
#outputWrapper div.highlight {
  border-left: 5px solid #56a;
  background: #f8f8ff;
}
#outputWrapper div:hover,
#outputWrapper div.hightlight:hover {
  background: #dde;
  cursor: default;
}
#outputWrapper .katex-error {
  max-width: unset;
  display: block;
  height: unset;
}
#input {
  margin: 10px 0;
  font-family: monaco, consolas, monospace;
  padding: 3px;
}
@media print {
  #outputWrapper {
    border: none;
  }
  #outputWrapper > div {
    border: none !important;
  }
  #inputWrapper,#help {
    display: none;
  }
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" lazyload>

<div id="outputWrapper"></div>

<div id="inputWrapper">
  <div class="control">
    <button onclick="toggleKeyboard()" class="fa fa-keyboard-o" title="键盘">
    </button><button id="copy" class="fa fa-copy" title="复制">
    </button><button id="newFormula" class="fa fa-plus" title="新增">
    </button><button id="deleteFormula" class="fa fa-minus" title="删除">
    </button><button id="savePng" class="fa fa-download" title="保存 (试验)">
    </button><button id="lang">asciimath</button>
  </div>
  <div id="keyboard" class="hidden">
    <button title="plus">+</button>
    <button title="minus">-</button>
    <button name="xx" title="times">x</button>
    <button title="division">/</button>
    <button title="equals">=</button>
    <button title="supscript">^</button>
    <button title="subscript">_</button>
    <button name="sqrt" title="square root">&#x221a;</button>
    <button name="root n" title="root"><sup>n</sup>&#x221a;</button>
    <button name="int" title="integral">&#x222b;</button>
    <button name="sum" title="summation">&Sigma;</button>
    <button name="prod" title="product">&Pi;</button>
    <button name="oo" title="infinity">&#x221e;</button>
    <button value="1" title="parenthesis">()</button>
    <button value="1" title="bracket">[]</button>
    <button value="1" title="brace">{}</button>
    <button value="2" title="invisible group">{::}</button>
    <button name="[a,b;c,d]" title="matrix">[..]</button>
    <button name="``" value="1" title="text">T</button>
    <button name="`<br>&#10;`" title="linebreak">\n</button>
  </div>
  <textarea id="input" rows="5" lang="asciimath" spellcheck="false"></textarea>
</div>

<!--
<p id="help">
  <a target="_blank" href="../../index.html#math/example/asciimath">更多示例帮助?</a>
</p>
-->

<div id="help">
<h2>什么是 Asciimath?</h2>

<ol>一种 js 实现的简易的数学公式标记语言. 相比 latex 更加易学易用, 它有如下特点:
  <li>没有 latex 中繁琐的反斜杠, 可读性强;</li>
  <li>即使公式有语法错误, 也只会影响单个公式, 不影响整个页面的加载;</li>
  <li>asciimath 的优先级很复杂, 但你只需在不确定时多加括号;</li>
</ol>

<p>几个简单的示例:</p>

<table>
  <tr>
    <th>主题</th>
    <th>效果</th>
    <th>源码</th>
  </tr>
  <tr>
    <td>上下标</td>
    <td>`a_1^2 + b_1^2 = c_1^2`</td>
    <td>a_1^2 + b_1^2 = c_1^2</td>
  </tr>
  <tr>
    <td>文字</td>
    <td>`"hello world"`</td>
    <td>"hello world"</td>
  </tr>
  <tr>
    <td>分式</td>
    <td>`a/b, a//b`</td>
    <td>a/b, a//b</td>
  </tr>
  <tr>
    <td>根号</td>
    <td>`sqrt n, root n x, a^2/sqrt b`</td>
    <td>sqrt n, root n x, a^2/sqrt b</td>
  </tr>
  <tr>
    <td>极限</td>
    <td>`lim_(n to oo) (1+1/n)^n`</td>
    <td>lim_(n to oo) (1+1/n)^n</td>
  </tr>
  <tr>
    <td>积分</td>
    <td>`int_a^b f(x) dx`</td>
    <td>int_a^b f(x) dx</td>
  </tr>
  <tr>
    <td>隐形括号</td>
    <td>`sin{:x/2:}`</td>
    <td>sin{:x/2:}</td>
  </tr>
  <tr>
    <td>微分</td>
    <td>`dy/dx, ("d"r)/("d"theta), f''(x)`</td>
    <td>dy/dx, ("d"r)/("d"theta), f''(x)</td>
  </tr>
  <tr>
    <td>偏微分</td>
    <td>`(del f)/(del x), (del^3 f)/(del x del y^2)`</td>
    <td>(del f)/(del x), (del^3 f)/(del x del y^2)</td>
  </tr>
  <tr>
    <td>偏微分简写 (试验)</td>
    <td>`part f x , part^3 f (x y^2), part {::} x , partial f x`</td>
    <td>part f x , part^3 f (x y^2), part {::} x , partial f x</td>
  </tr>
  <tr>
    <td>矩阵</td>
    <td>`[a, b; c, d]`</td>
    <td>[a, b; c, d]</td>
  </tr>
  <tr>
    <td>分段函数</td>
    <td>`|x| = { x,  if x ge 0; -x, otherwise :}`</td>
    <td>|x| = { x,  if x ge 0; -x, otherwise :}</td>
  </tr>
</table>

<h2>Asciimath 符号参考手册</h2>

<table class="col2">
<caption>希腊字母</caption>
<tr>
	<td>`alpha`</td>
	<td>alpha</td>
	<td>`beta`</td>
	<td>beta</td>
	<td>`chi`</td>
	<td>chi</td>
	<td>`delta`</td>
	<td>delta</td>
</tr>
<tr>
	<td>`Delta`</td>
	<td>Delta</td>
	<td>`epsi`</td>
	<td>epsi</td>
	<td>`varepsilon`</td>
	<td>varepsilon </td>
	<td>`eta`</td>
	<td>eta</td>
</tr>
<tr>
	<td>`gamma`</td>
	<td>gamma</td>
	<td>`Gamma`</td>
	<td>Gamma</td>
	<td>`iota`</td>
	<td>iota</td>
	<td>`kappa`</td>
	<td>kappa</td>
</tr>
<tr>
	<td>`lambda`</td>
	<td>lambda</td>
	<td>`Lambda`</td>
	<td>Lambda</td>
	<td>`mu`</td>
	<td>mu</td>
	<td>`nu`</td>
	<td>nu</td>
</tr>
<tr>
	<td>`omega`</td>
	<td>omega</td>
	<td>`Omega`</td>
	<td>Omega</td>
	<td>`phi`</td>
	<td>phi</td>
	<td>`varphi`</td>
	<td>varphi</td>
</tr>
<tr>
	<td>`Phi`</td>
	<td>Phi</td>
	<td>`pi`</td>
	<td>pi</td>
	<td>`Pi`</td>
	<td>Pi</td>
	<td>`psi`</td>
	<td>psi</td>
</tr>
<tr>
	<td>`Psi`</td>
	<td>Psi</td>
	<td>`rho`</td>
	<td>rho</td>
	<td>`sigma`</td>
	<td>sigma</td>
	<td>`Sigma`</td>
	<td>Sigma</td>
</tr>
<tr>
	<td>`tau`</td>
	<td>tau</td>
	<td>`theta`</td>
	<td>theta</td>
	<td>`vartheta`</td>
	<td>vartheta</td>
	<td>`Theta`</td>
	<td>Theta</td>
</tr>
<tr>
	<td>`upsilon`</td>
	<td>upsilon</td>
	<td>`xi`</td>
	<td>xi</td>
	<td>`Xi`</td>
	<td>Xi</td>
	<td>`zeta`</td>
	<td>zeta</td>
</tr>
</table>

<table class="col2">
<caption>运算符</caption>
<tr>
	<td>`+`</td>
	<td>+</td>
	<td>`-`</td>
	<td>-</td>
	<td>`*`</td>
	<td>*</td>
	<td>`**`</td>
	<td>**</td>
</tr>
<tr>
	<td>`//`</td>
	<td>//</td>
	<td>`\\ `</td>
	<td>\\</td>
	<td>`xx`</td>
	<td>xx</td>
	<td>`-:`</td>
	<td>-:</td>
</tr>
<tr>
	<td>`@`</td>
	<td>@</td>
	<td>`o+`</td>
	<td>o+</td>
	<td>`ox`</td>
	<td>ox</td>
	<td>`o.`</td>
	<td>o.</td>
</tr>
<tr>
	<td>`sum`</td>
	<td>sum</td>
	<td>`prod`</td>
	<td>prod</td>
	<td>`^^`</td>
	<td>^^</td>
	<td>`^^^`</td>
	<td>^^^</td>
</tr>
<tr>
	<td>`vv`</td>
	<td>vv</td>
	<td>`vvv`</td>
	<td>vvv</td>
	<td>`nn`</td>
	<td>nn</td>
	<td>`nnn`</td>
	<td>nnn</td>
</tr>
<tr>
	<td>`uu`</td>
	<td>uu</td>
	<td>`uuu`</td>
	<td>uuu</td>
</tr>
</table>

<table class="col2">
<caption>关系符号</caption>
<tr>
	<td>`=`</td>
	<td>=</td>
	<td>`!=`</td>
	<td>!=</td>
	<td>`lt`</td>
	<td>lt</td>
	<td>`gt`</td>
	<td>gt</td>
</tr>
<tr>
	<td>`le`</td>
	<td>le</td>
	<td>`ge`</td>
	<td>ge</td>
	<td>`-<`</td>
	<td>-<</td>
	<td>`>-`</td>
	<td>>-</td>
</tr>
<tr>
	<td>`in`</td>
	<td>in</td>
	<td>`notin`</td>
	<td>!in</td>
	<td>`sub`</td>
	<td>sub</td>
	<td>`sup`</td>
	<td>sup</td>
</tr>
<tr>
	<td>`sube`</td>
	<td>sube</td>
	<td>`supe`</td>
	<td>supe</td>
	<td>`normal`</td>
	<td>normal</td>
	<td>`&#8940;`</td>
	<td>&amp;#8940;</td>
</tr>
<tr>
	<td>`&#8810;`</td>
	<td>&amp;#8810;</td>
	<td>`&#10197;`</td>
	<td>&amp;#10197;</td>
	<td>`&#10198;`</td>
	<td>&amp;#10198;</td>
	<td>`&#10199;`</td>
	<td>&amp;#10199;</td>
</tr>
<tr>
	<td>`&#8771;`</td>
	<td>&amp;#8771;</td>
	<td>`-=`</td>
	<td>-=</td>
	<td>`~=`</td>
	<td>~=</td>
	<td>`~~`</td>
	<td>~~</td>
</tr>
<tr>
	<td>`prop`</td>
	<td>prop</td>
</tr>
</table>

<table class="col2">
<caption>逻辑符号</caption>
<tr>
	<td>`and`</td>
	<td>and</td>
	<td>`or`</td>
	<td>or</td>
	<td>`not`</td>
	<td>not</td>
	<td>`rArr`</td>
	<td>rArr</td>
</tr>
<tr>
	<td>`if`</td>
	<td>if</td>
	<td>`iff`</td>
	<td>iff</td>
	<td>`AA`</td>
	<td>AA</td>
	<td>`EE`</td>
	<td>EE</td>
</tr>
<tr>
	<td>`_|_`</td>
	<td>_|_</td>
	<td>`TT`</td>
	<td>TT</td>
	<td>`|--`</td>
	<td>|--</td>
	<td>`|==`</td>
	<td>|==</td>
</tr>
</table>

<table class="col2">
<caption>括号和隐形括号</caption>
<tr>
	<td>`(`</td>
	<td>(</td>
	<td>`{: )`</td>
	<td>)</td>
	<td>`[`</td>
	<td>[</td>
	<td>`{: ]`</td>
	<td>]</td>
</tr>
<tr>
	<td>`{`</td>
	<td>{</td>
	<td>`{: }`</td>
	<td>}</td>
	<td>`(:`</td>
	<td>(:</td>
	<td>`:)`</td>
	<td>:)</td>
</tr>
<tr>
	<td>`{:`</td>
	<td>{:</td>
	<td>`{::}`</td>
	<td>:}</td>
	<td>`|`</td>
	<td>|</td>
</tr>
</table>

<table class="col2">
<caption>杂项</caption>
<tr>
	<td>`int`</td>
	<td>int</td>
	<td>`iint`</td>
	<td>iint</td>
	<td>`iiint`</td>
	<td>iiint</td>
	<td>`oint`</td>
	<td>oint</td>
</tr>
<tr>
	<td>`del`</td>
	<td>del</td>
	<td>`grad`</td>
	<td>grad</td>
	<td>`+-`</td>
	<td>+-</td>
  <td style="line-height:1em">&#8723;</td> <!-- 不知为什么会自动变高 -->
	<td>&amp;#8723;</td>
</tr>
<tr>
	<td>`O/`</td>
	<td>O/</td>
	<td>`oo`</td>
	<td>oo</td>
	<td>`aleph`</td>
	<td>aleph</td>
	<td>`/_`</td>
	<td>/_</td>
</tr>
<tr>
	<td>`:.`</td>
	<td>:.</td>
	<td>`:'`</td>
	<td>:'</td>
	<td>`...`</td>
	<td>...</td>
	<td>`cdots`</td>
	<td>cdots</td>
</tr>
<tr>
	<td>`vdots`</td>
	<td>vdots</td>
	<td>`ddots`</td>
	<td>ddots</td>
	<td>`&#8944;`</td>
	<td>&amp;#8944;</td>
</tr>
<tr>
	<td>|`\ `|</td>
	<td>|\ |</td>
	<td>|`quad`|</td>
	<td>|quad|</td>
	<td>`diamond`</td>
	<td>diamond</td>
	<td>`square`</td>
	<td>square</td>
</tr>
<tr>
	<td>`|__`</td>
	<td>|__</td>
	<td>`__|`</td>
	<td>__|</td>
	<td>`|~`</td>
	<td>|~</td>
	<td>`~|`</td>
	<td>~|</td>
</tr>
<tr>
	<td>`NN`</td>
	<td>NN</td>
	<td>`ZZ`</td>
	<td>ZZ</td>
	<td>`QQ`</td>
	<td>QQ</td>
	<td>`RR`</td>
	<td>RR</td>
</tr>
<tr>
	<td>`CC`</td>
	<td>CC</td>
</tr>
</table>

<table class="col2">
<caption>数学函数</caption>
<tr>
	<td>`sin`</td>
	<td>sin</td>
	<td>`cos`</td>
	<td>cos</td>
	<td>`tan`</td>
	<td>tan</td>
	<td>`csc`</td>
	<td>csc</td>
</tr>
<tr>
	<td>`sec`</td>
	<td>sec</td>
	<td>`cot`</td>
	<td>cot</td>
	<td>`sinh`</td>
	<td>sinh</td>
	<td>`cosh`</td>
	<td>cosh</td>
</tr>
<tr>
	<td>`tanh`</td>
	<td>tanh</td>
	<td>`log`</td>
	<td>log</td>
	<td>`ln`</td>
	<td>ln</td>
	<td>`det`</td>
	<td>det</td>
</tr>
<tr>
	<td>`dim`</td>
	<td>dim</td>
	<td>`lim`</td>
	<td>lim</td>
	<td>`mod`</td>
	<td>mod</td>
	<td>`gcd`</td>
	<td>gcd</td>
</tr>
<tr>
	<td>`lcm`</td>
	<td>lcm</td>
	<td>`min`</td>
	<td>min</td>
	<td>`max`</td>
	<td>max</td>
	<td>`sgn`</td>
	<td>sgn</td>
</tr>
</table>

<table class="col2">
<caption>箭头</caption>
<tr>
	<td>`uarr`</td>
	<td>uarr</td>
	<td>`darr`</td>
	<td>darr</td>
	<td>`rarr`</td>
	<td>rarr</td>
	<td>`->`</td>
	<td>-></td>
</tr>
<tr>
	<td>`|->`</td>
	<td>|-></td>
	<td>`larr`</td>
	<td>larr</td>
	<td>`harr`</td>
	<td>harr</td>
	<td>`rArr`</td>
	<td>rArr</td>
</tr>
<tr>
	<td>`lArr`</td>
	<td>lArr</td>
	<td>`hArr`</td>
	<td>hArr</td>
</tr>
</table>

<table class="col2">
<caption>字体</caption>
<tr>
	<td>`bb A`</td>
	<td>bb A</td>
	<td>`bm A`</td>
	<td>bm A</td>
	<td>`bbb A`</td>
	<td>bbb A</td>
	<td>`cc A`</td>
	<td>cc A</td>
</tr>
<tr>
	<td>`tt A`</td>
	<td>tt A</td>
	<td>`fr A`</td>
	<td>fr A</td>
	<td>`sf A`</td>
	<td>sf A</td>
</tr>
</table>

<table class="col2">
<caption>注音符号</caption>
<tr>
	<td>`hat x`</td>
	<td>hat x</td>
	<td>`bar x`</td>
	<td>bar x</td>
	<td>`ul x`</td>
	<td>ul x</td>
	<td>`vec x`</td>
	<td>vec x</td>
</tr>
<tr>
	<td>`dot x`</td>
	<td>dot x</td>
	<td>`ddot x`</td>
	<td>ddot x</td>
	<td>`==_(12345)^(67890)`</td>
	<td colspan="3">==_(12345)^(67890)</td>
</tr>
<tr>
	<td>`overbrace(12345)`</td>
	<td colspan="3">overbrace(12345)</td>
	<td>`overset "bala" x`</td>
	<td colspan="3">overset "bala" x</td>
</tr>
<tr>
	<td>`overset(&#x23de;)(12345)`</td>
	<td colspan="3">overset(&amp;#x23de;)(12345)</td>
	<td>`overset(&#x23b4;)(12345)`</td>
	<td colspan="3">overset(&amp;#x23b4;)(12345)</td>
</tr>
<tr>
	<td>`arc(12345)`</td>
	<td colspan="3">arc(12345)</td>
	<td>`overset(&#x23e0;)(12345)`</td>
	<td colspan="3">overset(&amp;#x23e0;)(12345)</td>
</tr>
</table>

<h2>测试用例</h2>

<table>
  <tr>
    <td>上标过高问题</td>
    <td>`f(x)^(x^2) g'(x)`</td>
    <td>公式中的 g 和 f 分到了同一组, 导致 ' 成为它们的共同上标</td>
  </tr>
  <tr>
    <td>阶乘的优先级</td>
    <td>`pi_1^233!/233`</td>
    <td>比分式优先, 但不及上下标</td>
  </tr>
  <tr>
    <td>firefox 阶乘上标问题</td>
    <td>`{:m!:}^n`
    <td>m!^n 会造成错误渲染</td>
  </tr>
</table>
</div>

<script>
function $(el) {
  if (el[0] == '#')
    return document.getElementById(el.slice(1));
}
var input = $('#input');
var output = $('#output');
var copy = $('#copy');
var lang = $('#lang');
var keyboard = $('#keyboard');
var outputWrapper = $('#outputWrapper');
var help = $('#help');

function render() {
  if (input.lang == 'asciimath') {
    output.asciimath = input.value;
    output.innerHTML = '`' + output.asciimath + '`';
    if (asciimath) {
      asciimath.render(output);
      output.tex = asciimath.texstr;
    }
  } else {
    output.tex = input.value;
    output.innerHTML = input.value;
    try {
      output.classList.remove('katex-error');
      katex.render(input.value, output);
    } catch (e) {
      console.error(e);
      output.innerText = e.message;
      output.classList.add('katex-error');
    }
  }
  // 调整输入框大小
  input.setAttribute('rows', Math.max(5, input.value.split('\n').length))
}

// debounce
var timeout;
input.oninput = function(event) {
  if (timeout) clearTimeout(timeout);
  timeout = setTimeout(render, 300);
};

var asciimath = {
  katexpath: '../../js/katex.min.js',
  katex: true,
  onload: function () {
    input.oninput();
    asciimath.render(help);
  }
};
</script>
<script src="../../js/asciimath.js"></script>
<script src="../../js/html2canvas.min.js"></script>
<script>
function toggleKeyboard() {
  if (keyboard.classList.contains('hidden')) {
    keyboard.classList.remove('hidden');
  } else {
    keyboard.classList.add('hidden');
  }
}

function getCaret(obj) {
  var result = 0;
  if (obj.selectionStart >= 0) { // IE 以外
    result = obj.selectionStart;
  } else { // IE
    try {
      var range;
      if (/textarea/i.test(obj.tagName)) { // TEXTAREA
        range = event.srcElement.createTextRange();
        range.moveToPoint(event.x, event.y);
      } else { // Text
        range = document.selection.createRange();
      }
      range.moveStart("character", -event.srcElement.value.length);
      result = range.text.length;
    } catch(e) { }
  }
  return result;
}

function setCaret(textarea, pos) {
  if (textarea && pos) {
    if(textarea.setSelectionRange) {
      setTimeout(function() {
        textarea.setSelectionRange(pos, pos);
        textarea.focus();
      }, 0);
    } else if (textarea.createTextRange) {
      var range = textarea.createTextRange();
      range.move('character', pos);
      range.select();
    }
  }
}

function appendText(b) {
  var text = b.name || b.innerText;
  return function() {
    input.focus();
    var i = getCaret(input);
    var leftStr = input.value.substr(0,i)
    var rightStr = input.value.substr(i)
    var startsWithAlpha = /^[A-Za-z]/
    var endsWithAlpha = /[A-Za-z]$/
    if (startsWithAlpha.test(text) && endsWithAlpha.test(leftStr))
      leftStr += ' ';
    if (startsWithAlpha.test(rightStr) && endsWithAlpha.test(text))
      text += ' ';
    input.value = leftStr + text + rightStr;
    var pos = b.value ? i + parseInt(b.value): i + text.length;
    setCaret(input, pos);
    render();
  }
}

for (b of keyboard.children) {
  if (/button/i.test(b.tagName)) {
    b.onclick = appendText(b);
  }
}

lang.onclick = function() {
  if (input.lang == 'asciimath') {
    lang.innerText = 'tex';
    input.lang = 'tex';
    input.value = output.tex;
  } else {
    lang.innerText = 'asciimath';
    input.lang = 'asciimath';
    input.value = output.asciimath || '';
  }
};

copy.onclick = function() {
  input.select();
  document.execCommand('copy');
  input.blur();
};

function highlight(elem) {
  if (output)
    output.classList.remove('highlight');
  elem.classList.add('highlight');
  output = elem;
  if (input.lang == 'tex')
    input.value = output.tex || '';
  else // if (input.lang == 'asciimath')
    input.value = output.asciimath || '';
  input.focus();
}

deleteFormula.onclick = function() {
  var formulae = outputWrapper.children;
  if (formulae.length > 1) {
    outputWrapper.removeChild(output);
    highlight(formulae[formulae.length-1]);
  }
};

newFormula.onclick = function() {
  var div = document.createElement('div');
  div.onclick = function() {
    highlight(div);
  }
  highlight(div);
  outputWrapper.appendChild(div);
  outputWrapper.scrollTop = outputWrapper.offsetHeight
};

const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
function randname(length, radix = chars.length) {
  return Array.from({ length }, () =>
    chars[0 | Math.random() * radix]
  ).join('')
}

savePng.onclick = function () {
  var el = document.querySelector("#outputWrapper")
  html2canvas(el, {
    allowTaint: true,
    taintTest: false,
    width: el.offsetWidth,
    height: el.offsetHeight,
    scale: 2,
    dpi: 300
  }).then(canvas => {
    // document.body.appendChild(canvas)
    var a = document.createElement('a')
    a.download = randname(12) + '.png'
    a.href = canvas.toDataURL()
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  });
}

function typewrite(str) {
  var i = 1;
  var interval = setInterval(() => {
    input.value = str.slice(0, i);
    if (i <= str.length) {
      ++i;
    } else {
      clearInterval(interval);
      render();
    }
  }, 50);
}

newFormula.onclick();
//typewrite('x = (-b+-sqrt(b^2-4ac))/(2a)');
input.value = 'x = (-b+-sqrt(b^2-4ac))/(2a)';
</script>
</body>
</html>
